<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>orderList</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .page {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            background: #f8f8f8;
        }

        .tabs {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            height: 44px;
            background-color: white;
            overflow: auto;
        }

        .nav_one {
            display: flex;
            flex-shrink: 0;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            justify-content: center;
            align-items: center;
        }

        .nav_zi {
            padding: 7px 0;
            font-size: 14px;
            color: #999999;
            border-bottom: none;
        }

        .nav_zi_on {
            color: #ff7037;
            border-bottom: 2px solid #ff7037;
        }

        .list_one {
            width: 100%;
            background: #ffffff;
            margin-top: 8px;
        }

        .top_box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 44px;
            padding: 0 15px;
            border-bottom: 1px solid #f8f8f8;
        }

        .top_text {
            font-size: 14px;
            color: #333333;
        }

        .bot-box {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 44px;
            padding: 0 15px;
        }

        .list_szi {
            font-size: 12px;
            color: #333333;
        }

        .list_rzi {
            font-size: 16px;
            color: #fe5c00;
        }

        .flex1 {
            flex: 1;
        }

        .btn {
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin-left: 8px;
            border-radius: 2px;
            font-size: 14px;
            padding: 0 3px;
        }

        .btn-gray {
            background-color: white;
            border: 1px solid #b5b5b5;
            color: #999999;
        }

        .btn-orange {
            background-color: #ff7037;
            color: white;
        }
        .good-list {
            display: flex;
            flex-direction: column;
        }

        .order-goods-page {
            background-color: white;
        }

        .order-goods-item {
            display: flex;
            flex-direction: row;
            padding-bottom: 15px;
            margin: 15px 15px 0;
            border-bottom: 1px solid #f8f8f8;
        }

        .order-goods-img {
            width: 90px;
            height: 68px;
            margin-right: 12px;
            border-radius: 4px;
        }

        .order-goods-right {
            align-content: center;
            flex: 1;
        }

        .order-goods-title {
            font-size: 14px;
            color: #333333;
        }

        .order-goods-guige-box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 5px;
        }

        .order-goods-guige,
        .order-goods-num {
            font-size: 12px;
            color: #999999;
        }

        .order-goods-bottom {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        .order-goods-price {
            font-size: 14px;
            color: #fe904a;
        }

        .order-goods-btn {
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin-left: 8px;
            border-radius: 2px;
            font-size: 14px;
            padding: 0 3px;
        }

        .order-goods-btn-gray {
            background-color: white;
            border: 1px solid #b5b5b5;
            color: #999999;
        }

        .order-goods-btn-orange {
            background-color: #ff7037;
            color: white;
        }
    </style>
</head>

<body>
    <div class="page">
        <!-- 导航 -->
        <div class="nav-bar">
            <div onclick="back()" class="nav-bar-back">
                <img src="../images/back/back.png" alt="back" class="nav-bar-back-icon" />
                <span class="nav-bar-back-text">返回</span>
            </div>
            <span class="nav-bar-title">我的订单</span>
        </div>
        <!-- tab切换 -->
        <div class="tabs"></div>
        <!-- 订单列表 -->
        <div class="scroll-view-y">
            <div class="good-list"></div>
        </div>


    </div>
</body>

<script src="../script/api.js"></script>
<script>
    apiready = function () {
        $api.fixStatusBar($api.dom('.nav-bar'));
        if (api.pageParam.index) {
            tabClick(api.pageParam.index)
        }
    }
    function back() {
        api.closeWin();
    }

    // 我的订单Tab切换
    let orderTabList = [{
        text: '全部',
        type: 0
    }, {
        text: '待付款',
        type: 1
    }, {
        text: '待发货',
        type: 2
    }, {
        text: '待收货',
        type: 4
    }, {
        text: '已完成',
        type: 5
    }]
    getOrderTabContent()
    function getOrderTabContent() {
        let str = '';
        orderTabList.forEach((item, index) => {
            str += `
            <div
                class="nav_one"
                onclick="tabClick('${index}')">
                <span class="nav_zi ${index == 0 ? 'nav_zi_on' : ''}">${item.text}</span>
            </div>
                `
            // <span class="${0 == index ? 'nav_zi nav_zi_on' : 'nav_zi'}">${item.text}</span>
        })
        document.querySelector('.tabs').innerHTML = str;

    }
    // 订单tab切换
    function tabClick(index) {
        const navList = $api.domAll('.nav_zi');
        navList.forEach((item, i) => {
            $api.removeCls(item, 'nav_zi_on');
        })
        $api.addCls(navList[index], 'nav_zi_on')
    }


    let orderList = [
        {
            "orderid": "517932164548",
            "status": 1,
            "pay_price": 5999,
            "buy_data_title": "夏新款套装女洋气时尚短裤阔腿裤",
            "buy_data_image":
                "../images/linkImg/3ee90482ef5b13bdbd9e9dc3f79f495e.png",
            "buy_data_price": 699,
            "buy_data_key": "白色/S码",
            "buy_data_buynum": 2,
            "status_str": "已关闭",
            "buy_num": 2
        },
        {
            "orderid": "517932164548",
            "status": 9,
            "pay_price": 6999,
            "buy_data_title":
                "莫代尔无袖吊带连衣裙春秋侧开叉长裙女夏季内搭修身显瘦打底裙子莫…",
            "buy_data_image":
                "../images/linkImg/c6f60b449d9112c4aac0b681da880526.png",
            "buy_data_price": 6999,
            "buy_data_key": "黑色/M码",
            "buy_data_buynum": 2,
            "status_str": "已关闭",
            "buy_num": 2
        }
    ]

    getOrderListContent()
    function getOrderListContent() {
        let str = '';
        orderList.forEach((item, index) => {
            str += `
            <div class="list_one">
                <div class="top_box">
                    <span class="top_text">${'订单编号：' + item.orderid}</span>
                    <span class="top_text">${item.status_str}</span>
                </div>
                <div class="order-goods-page">
                    <div class="order-goods-item">
                        <img onclick="onDetailClick()" class="order-goods-img" src="${item.buy_data_image}" mode="aspectFill" />
                        <div class="order-goods-right">
                            <span class="order-goods-title">${item.buy_data_title}</span>
                            <div class="order-goods-guige-box">
                                <span class="order-goods-guige">${item.buy_data_key ? ' ' + item.buy_data_key : '默认规格'}</span>
                                <span class="order-goods-num">${'x' + (item.buy_data_buynum)}</span>
                            </div>
                            <div class="order-goods-bottom">
                                <span class="order-goods-price">${'¥' + item.buy_data_price}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bot-box">
                    <span class="list_szi">${'共' + (item.buy_num || 0) + '件商品，合计:'}</span>
                    <span class="list_rzi">${'￥' + item.pay_price}</span>
                    <div class="flex1"></div>
                    <!-- 取消订单 未支付 -->
                    ${item.status == 1 ? '<span class="btn btn-gray" onclick="cancleOrder(1)">取消订单</span>' : ''}
                    ${item.status == 1 ? '<span class="btn btn-orange" onclick="onPayClick()">立即付款</span>' : ''}
                    <!-- 取消订单 已支付 -->
                    ${item.status > 1 && item.status < 4 ? '<span class="btn btn-gray" onclick="cancleOrder(2)>取消订单</span>' : ''}
                    <!-- 确认收货 -->
                    ${item.status == 4 ? '<span class="btn btn-orange">确认收货</span>' : ''}
                </div>
            </div>
                `
        })
        document.querySelector('.good-list').innerHTML = str;

    }

    function cancleOrder(param) {
        api.toast({
            msg: param==1?'取消未支付订单':'取消已支付订单',
            location: 'middle'
        })
    }

    function onDetailClick() {
        api.openWin({
            name: 'detail',
            url:'./detail.html'
        })
    }
    function onPayClick(){
        api.openWin({
            name: 'place_order',
            url:'./place_order.html'
        })
    }

</script>

</html>